<template>
  <view class="settings-container">
    <view class="settings-header">
      <view class="title">设置</view>
    </view>
    
    <view class="settings-content">
      <view class="setting-item" v-for="(item, index) in settingsList" :key="index" @click="handleItemClick(item)">
        <view class="item-left">
          <text class="item-title">{{ item.title }}</text>
        </view>
        <view class="item-right">
          <text class="item-value">{{ item.value }}</text>
          <text class="iconfont icon-right"></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      settingsList: [
        { id: 1, title: '通知设置', value: '', type: 'notification' },
        { id: 2, title: '隐私设置', value: '', type: 'privacy' },
        { id: 3, title: '清除缓存', value: '0MB', type: 'cache' },
        { id: 4, title: '关于我们', value: '', type: 'about' },
        { id: 5, title: '版本信息', value: 'v1.0.0', type: 'version' }
      ]
    }
  },
  methods: {
    handleItemClick(item) {
      console.log('点击了设置项：', item.title);
      // 根据不同类型处理不同的设置项
      switch(item.type) {
        case 'cache':
          this.clearCache();
          break;
        case 'about':
          this.showAbout();
          break;
        default:
          uni.showToast({
            title: `${item.title}功能开发中`,
            icon: 'none'
          });
      }
    },
    clearCache() {
      uni.showModal({
        title: '提示',
        content: '确定要清除缓存吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '清除中...'
            });
            
            setTimeout(() => {
              uni.hideLoading();
              uni.showToast({
                title: '清除成功',
                icon: 'success'
              });
              // 更新缓存大小
              this.settingsList.find(item => item.type === 'cache').value = '0MB';
            }, 1000);
          }
        }
      });
    },
    showAbout() {
      uni.navigateTo({
        url: '/pages/about/about'
      });
    }
  }
}
</script>

<style lang="scss">
.settings-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  
  .settings-header {
    padding: 30rpx;
    background-color: #fff;
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
    }
  }
  
  .settings-content {
    margin-top: 20rpx;
    
    .setting-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      background-color: #fff;
      border-bottom: 1rpx solid #eee;
      
      .item-left {
        .item-title {
          font-size: 30rpx;
          color: #333;
        }
      }
      
      .item-right {
        display: flex;
        align-items: center;
        
        .item-value {
          font-size: 28rpx;
          color: #999;
          margin-right: 10rpx;
        }
        
        .icon-right {
          font-size: 24rpx;
          color: #ccc;
        }
      }
    }
  }
}
</style> 